<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon"/>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/static/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/css/style.css" rel="stylesheet">
        <link href="/static/css/custom.css" rel="stylesheet">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <link href="/static/dist/css/select2.min.css" rel="stylesheet" />
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="/static/js/scripts.js"></script>
        <script src="/static/dist/js/select2.min.js"></script>

        <link href="/static/dist/css/select2.min.css" rel="stylesheet"/>
        <script src="/static/dist/js/select2.min.js"></script>

        <title>VFR Flight Planner</title>

        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-35360592-2', 'auto');
            ga('send', 'pageview');
        </script>
        <script>
            // http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/
            var counter = 1;
            var max = 10;
            function addInput(divName){
                 if (counter == max)  {
                    alert("You have reached the maximum of " + counter + " inputs");
                 }
                 else {
                    // each element's id corresponds to a new weight and arm
                    var newdiv = document.createElement('div');
                    newdiv.innerHTML = "<br><b>Moment " + (counter+1) + "</b>: &nbsp;<input type='text' style='width:15%; border-radius: 5px; padding:3px;' name='w" + (counter+1) + "' id='w" + (counter+1) + "' placeholder='Weight (lbs)'>&nbsp;<input type='text' style='width:15%; border-radius: 5px; padding:3px;' name='a" + (counter+1) + "' id='a" + (counter+1) + "' placeholder='Arm (in)'>";
                    document.getElementById(divName).appendChild(newdiv);
                    counter++;
                 }
            }
        </script>
        <!-- selec2 text boxes -->
        <script type="text/javascript">
            $('select').select2();
        </script>

        <script type="text/javascript">
            $(document).ready(function() {
            $(".js-example-basic-single").select2();
            });
        </script>
    </head>

    <body>
        <!-- Loading bar and background video (?) - in progress. -->
        <!--<script src="//fast.eager.io/LkRamv2Dag.js"></script>--> <!-- page loading -->
        <br>
        <div class="container">
            <h1>
                VFR FLIGHT PLANNER
            </h1>
        </div>
        <hr>
<!--         <div id="loading">
            <br>
            <div class="centered">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner h3" role="listbox">
                        <div class="item active">
                            checking your cruising altitude
                        </div>
                        <div class="item">
                            creating elevation plot
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <div id="content">
            <form action="/fplanner" method="post" role="form">
                <div>
                    <div class="container">
                        <h4>
                            Route Information
                        </h4>
                        <br>
                        {{ form.hidden_tag() }}
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="name">{{ form.region.label }}</label>
                            <div class="">
                                {{ form.region (style="width:20%; border-radius: 5px; padding:3px;", class="js-example-basic-single") }}
                            </div> 
                            <small> For weather only. See <a href="https://aviationweather.gov/products/nws/winds/">this</a> for information regarding regions.</small>
                            <br>
                            <br>
                            <label class="control-label col-sm-2" for="name">{{ form.orig.label }}</label>
                            <div class="">
                                {{ form.orig (style="width:20%; border-radius: 5px; padding:3px;", class="js-example-basic-single") }}
                            </div> 
                            <br>
                            <br>
                            <label class="control-label col-sm-2" for="name">{{ form.dest.label }}</label>
                            <div class="">
                                {{ form.dest (style="width:20%; border-radius: 5px; padding:3px;", class="js-example-basic-single") }}
                            </div> 
                            <br>
                            <br>
                            <label class="control-label col-sm-2" for="name">{{ form.speed.label }}</label>
                            <div class="">
                                {{ form.speed (style="width:20%; border-radius: 5px; padding:3px;") }}
                            </div>
                            <br>
                            <br>
                            <label class="control-label col-sm-2" for="name">{{ form.alt.label }}</label>
                            <div class="">
                                {{ form.alt (style="width:20%; border-radius: 5px; padding:3px;") }}
                            </div>
                            <br>
                            <br>
                            <label class="control-label col-sm-2" for="name">{{ form.climb.label }}</label>
                            <div class="">
                                {{ form.climb (style="width:20%; border-radius: 5px; padding:3px;") }}
                            </div>
                            <br>
                            <br>
                            <label class="control-label col-sm-2" for="name">{{ form.climb_speed.label }}</label>
                            <div class="">
                                {{ form.climb_speed (style="width:20%; border-radius: 5px; padding:3px;") }}
                            </div>
                            <div class="col-sm-offset-2 col-sm-10">
                                <br>
                            </div>
                        </div>
                        <small>
                            Please limit flights to under 1000 nm. 
                        </small>
                    </div>
                    <br>
                    <br>
                </div>
                <div class="container">
                    <input type="submit" class="btn btn-primary" style="border-radius:5px" value="Calculate Route" onclick="loading();">
                    I am looking for feedback and suggestions! Please contact me at <a href="/contact">this form</a> or via <a href="mailto:milichab@gmail.com">email</a>. 
                </div>
                <!-- <div class="container">
                        I am looking for feedback and suggestions! Please <a href="/contact">contact me</a>. 
                </div> -->
                <br>
                <!-- 
                    Optional dynamic form generalized weights and arms. 
                -->
                <hr>
                <div class="container" style="padding-bottom:30px">
                    <h4>
                        Airplane Weight and Balance <font color="#d3d3d3">(optional)</font>
                    </h4>
                    <br>
                    <div class="container">
                        <font size = "2">
                            <b>Airplane Type: </b>
                        </font>
                        <br>
                        <br>
                        <input type='text' id="plane_type" style='width:15%; border-radius: 5px; padding:3px;' name='plane_type' value="C172SP NAV III">
                        <br>
                        <br>
                        <div id="dynamicInput"> 
                            <!-- First box -->
                            <b>Moment 1:</b>&nbsp;
                            <input type='text' id="w1" style='width:15%; border-radius: 5px; padding:3px;' name='w1' placeholder="Weight (lbs)">
                            <input type='text' id="a1" style='width:15%; border-radius: 5px; padding:3px;' name='a1' placeholder="Arm (in)">
                        </div>
                    </div>
                    <br>
                    <input type="button" class="btn btn-sm btn-primary" value="Add another weight element" onClick="addInput('dynamicInput');">
                </div>
                <br>
            </form>
        </div>
    </body>
    <footer>
        <div class="navbar navbar-inverse navbar-fixed-bottom">
            <div class="container">
                <div class="navbar-collapse collapse" id="footer-body">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <br>
        <script src="/static/js/load.js"></script>
    </footer>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>
</html>

<!--© 2015. Protected under Creative Commons Attribution-NonCommercial License. -->
